Getting Started with NativeScript: Social psychology by Cheryl Carpenter

Author:Cheryl Carpenter [Carpenter, Cheryl]
Language: eng
Format: epub
Published: 2020-11-09T00:00:00+00:00

Chapter 4

Action dialog

This dialog gives you a list of items you can choose. When the item gets chosen, it returns a value. It also allows you to change the title, message, and button texts (see the following image). To open the action dialog, you can call dialogs.

action({title: "My Action Title", message: "My Action Message", cancelButtonText: "Cancel Me", actions: ["Apple", "Orange",

"Grape"]}).then(…);.

You can also explore these dialogs and the code to generate them in the

layouter program, which can be downloaded from

GettingStartedWithNativeScript. Now, let's take a look at what promises are, which is what dialog, and what many other NativeScript components returns.

Promises

NativeScript in a lot of its code actually uses the newer ES6 promise-based standard system. Instead of passing a callback into the function, the code returns a promise object on which you can use a then() or catch() function. The then() function allows you to set up your function you want to run when the promise is successful.

The catch() function is what allows you to set up a function to be run when the promise has failed. An example would look like this:

var processCompleted = doSomeAsyncTask();

processCompleted.then(handleSuccess).catch(handleError);

You can chain the then() and catch() functions, or you can call the processCompleted parameter separately with a then() function and then, add a catch() function later. You can also chain promises so that the results of one promise are returned as another promise. Mozilla has an overview of ES6 promises at

Global_Objects/Promise.

[ 75 ]

Building a Featured Application

So, now that we checked out dialogs and promises, let's resume working on the application and work on the Declarative UI for this settings screen.

The settings screen Declarative UI

The Declarative UI code is actually compact. So, let's open up the settings.xml file. We are simply creating a page with two text entry fields and two buttons. Based on the actual preceding code, you can probably even write the majority, if not all of the UI, yourself. If you would like to try, I would guess that once you are done with this little exercise, you can check your awesome code against mine. Functionally, I would expect them to work in the same way. However, since I will use this screen to describe a new layout type, the code will not be exactly the same, as I will be cheating and using this awesome new layout before I have explained it to you. So, the first item on the page is, yes you got it, a Page component. So, if you remember, we used the shownModally parameter in the preceding JavaScript and loaded events.

We are assigning them here on the Page component. We also want to set Page.

actionBarHidden to be true, the reason why different versions of NativeScript have fixed and broken the actionBar component on a modal dialog. So, we are just going to disable it so that we won't have any issues:

<Page shownModally="shownModally" loaded="loaded"

actionBarHidden="true">

That was simple, and I would guess our code should be similar at this point. Now, here is where our files probably diverge. You probably used the StackLayout component as that is the only layout we have covered so far in the last three chapters.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.